<template>
  <!-- 物流结算按单查询 -->
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button @click="checkBill" style="width: 80px">查看单据</el-button>
        <el-button
          style="width: 80px"
          :disabled="!buttonsPermissions.DaYin"
          :class="!buttonsPermissions.DaYin ? 'disabled_button' : ''"
          @click="handleShortcutKeyPrint"
          >打印(P)</el-button
        >
      </div>
      <div class="btn_right">
        <el-input v-model="queryData.param" placeholder="请输入单据编号\物流公司名称\关键字搜索" />
        <el-button type="primary" @click="onQuery">搜索</el-button>
        <!-- <el-button @click="onRefresh">刷新</el-button> -->
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div" ref="contentView">
      <div ref="searchView">
        <div class="div_screen">
          <div class="screen_left">
            <div class="custom_item">
              <div class="item_title">物流公司</div>
              <xghSelect
                ref="wuliugongsi"
                class="custom_select_head"
                filterable
                clearable
                v-model="queryData.expressId"
                activeKey="expressName"
                :reqData="{ url: '/xghExpress/xghExpress/listNoPage' }"
              />
            </div>
            <!-- 经手人 -->
            <div class="custom_item">
              <div class="item_title">经手人</div>
              <div class="custom_select_head">
                <xghSelect
                  ref="jingshouren"
                  class="custom_select_head"
                  filterable
                  clearable
                  v-model="queryData.sysUserId"
                  activeKey="realname"
                  :reqData="{ url: '/dept/xghAccountBookDept/getAllDeptUsers' }"
                />
              </div>
            </div>
            <div class="custom_item">
              <div class="item_title">结销状态</div>
              <div class="custom_select_head">
                <j-dict-select-tag
                  type="select"
                  dictCode="closing_status"
                  style="width: 100%"
                  v-model="queryData.settlementStatus"
                  placeholder="请选择"
                ></j-dict-select-tag>
              </div>
            </div>
          </div>
          <div class="screen_right">
            <el-select @change="changeDate" v-model="monthValue">
              <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-date-picker
              v-model="nowDate"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onClickPicker"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-button type="primary" @click="onQuery">查询</el-button>
            <el-button plain @click="reset" style="border: 1px solid #dcdfe6 !important">重置</el-button>
          </div>
        </div>
      </div>
      <div class="div_table" :style="{ height: searchHeight + 'px' }">
        <div class="table_content">
          <div class="content_div1">
            <div class="table_Div1">
              <el-table
                ref="tableRef"
                show-summary
                :summary-method="getSummaries"
                highlight-current-row
                :header-cell-style="{
                  color: '#666666',
                  textAlign: 'center',
                  height: '30px',
                  borderColor: '#dddddd',
                }"
                :data="tableData"
                height="100%"
                @row-click="onClickRow"
                @row-dblclick="handleRowDbclick"
              >
                <!-- <el-table-column type="selection"></el-table-column> -->
                <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
                <template v-for="(item, index) in columnData">
                  <el-table-column
                    :show-overflow-tooltip="true"
                    :key="index"
                    :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                    v-if="item.zidingyiState"
                    :prop="item.props"
                    min-width="150px"
                    :sortable="item.sortable"
                    :width="item.props == 'orderNumber' ? '170px' : ''"
                  >
                    <template slot-scope="scope">
                      <span v-if="['receivablePrice', 'settlementPrice', 'balance'].includes(item.props)">
                        {{ $formatMoney(scope.row[item.props]) }}
                      </span>
                      <span v-else-if="item.props == 'reconciliationFlag'" style="text-align: center; width: 100%">
                        <el-checkbox
                          v-model="scope.row.reconciliationFlag"
                          @change="billReconciliation(scope.row, scope.$index)"
                        ></el-checkbox>
                      </span>

                      <span v-else>{{ scope.row[item.props] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </div>
          <div class="content_div">
            <div class="table_title">结销明细记录</div>
            <div class="table_Div">
              <el-table
                ref="tableRef1"
                show-summary
                :summary-method="getSummaries1"
                highlight-current-row
                :header-cell-style="{
                  color: '#666666',
                  textAlign: 'center',
                  height: '30px',
                  borderColor: '#dddddd',
                }"
                :data="settlementList"
                height="100%"
              >
                <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
                <template>
                  <el-table-column
                    v-for="(item, index) in detailColumnData"
                    :key="index"
                    :show-overflow-tooltip="true"
                    :label="item.morenName"
                    :prop="item.props"
                    min-width="150px"
                    :width="item.props == 'orderNumber' ? '170px' : ''"
                  >
                    <template slot-scope="scope">
                      <span v-if="['allPrice', 'offPrice', 'thisPrice'].includes(item.props)">
                        {{ $formatMoney(scope.row[item.props]) }}
                      </span>
                      <span v-else-if="item.props == 'reconciliationFlag'" style="text-align: center; width: 100%">
                        <el-checkbox
                          v-model="scope.row.reconciliationFlag"
                          @change="billReconciliation(scope.row, scope.$index)"
                        ></el-checkbox>
                      </span>

                      <span v-else>{{ scope.row[item.props] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      :defaultColumnDataArr="defaultColumnData"
      orderType="物流按单结算查询"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import dialogPrint from '@/views/components/dialogPrintStatic'
import { getAction, postAction } from '@/api/manage'
import { delcommafy, formatMoney } from '../../../utils'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms } from '@/utils/index'
import xghSelect from '@/components/xghSelect'
export default {
  name: 'logisticsSettlementOrder',
  mixins: [JeecgListMixin],
  components: {
    CConfiguration,
    dialogPrint,
    xghSelect,
  },
  computed: {
    ...mapGetters(['name']),
    buttonsPermissions() {
      return handlePermissions('物流按单结算查询')
    },
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
  },
  created() {
    this.getData()
    this.getTableData() // 获取表格信息数据

    this.$nextTick(() => {
      const contentView = this.$refs.contentView.clientHeight
      const divHeight = this.$refs.searchView.clientHeight
      this.searchHeight = contentView - divHeight - 20
    })
  },
  mounted() {
    this.$nextTick(() => {
      const contentView = this.$refs.contentView.clientHeight
      const divHeight = this.$refs.searchView.clientHeight
      this.searchHeight = contentView - divHeight - 60
    })
  },
  updated() {
    this.$nextTick(() => {
      this.$refs['tableRef'].doLayout()
    })
  },
  data() {
    return {
      searchHeight: 800,
      activeBill: {}, //单选单据信息
      // 查询条件数据
      queryData: {
        sysUserId: '', // 经手人id
        startDate: '', // 开始时间
        endDate: '', //结束时间
        expressId: '', //物流公司
        settlementStatus: '-1', //结算状态
        param: '',
      },
      // 月份选择
      monthValue: '本月',
      monthOptions: ['今日', '本周', '本月', '本年'],
      nowDate: [],
      // 表格数据
      tableData: [],
      settlementList: [],
      // 列配置数据
      defaultColumnData: [],
      columnData: [
        {
          morenName: '单据日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'createOrderDate',
        },
        {
          morenName: '单据编号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'orderNumber',
        },
        {
          morenName: '单据类型',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'orderType_dictText',
        },
        {
          morenName: '应收应付类型',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'payCollectType',
        },
        {
          morenName: '快递物流公司',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'expressName',
        },
        {
          morenName: '往来单位',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'xghCompanyId_dictText',
        },
        {
          morenName: '经手人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'sysUserId_dictText',
        },
        {
          morenName: '应结算金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'receivablePrice',
        },
        {
          morenName: '已结算',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'settlementPrice',
        },
        {
          morenName: '余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'balance',
        },
        {
          morenName: '结销状态',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'status_dictText',
        },
        {
          morenName: '单据状态',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          props: 'orderStatus_dictText',
        },
      ],
      detailColumnData: [
        {
          morenName: '结算日期',
          props: 'startTime',
        },
        {
          morenName: '收付款单据编号',
          props: 'orderNumber',
        },
        {
          morenName: '收/付款类型',
          props: 'type',
        },
        {
          morenName: '经手人',
          props: 'sysUserId_dictText',
        },
        {
          morenName: '应结销金额',
          props: 'allPrice',
        },
        {
          morenName: '此前已结销',
          props: 'offPrice',
        },
        {
          morenName: '本次结销金额',
          props: 'thisPrice',
        },
        {
          morenName: '备注',
          props: 'remark',
        },
      ],
      updateId: '', // 修改列配置时返回的id

      url: {
        listUrl: '/xghExpress/statement/getExpressSettlementList',
        detailUrl: '/xghExpress/statement/getExpressSettlementListInfoById',
        api: '物流按单结算查询',
        exportXlsUrl: '/xghPurchaseOrder/xghPurchaseOrder/exportPurchaseCountXls',
      },
      billName: '物流按单结算查询',
    }
  },
  mounted() {
    this.selectTitle()
  },
  methods: {
    // 打印
    async handleShortcutKeyPrint() {
      let ss = this.queryData.settlementStatus
      let data = {
        ...this.queryData,
        settlementStatus: ss == -1 ? undefined : ss,
      }
      console.log(123);
      let printExclusive = []
      const res = await getAction(this.url.listUrl, data)
      if (res.code !== 200) {
        return this.$elMessage.error('获取数据失败！')
      }
      printExclusive = (res.result || []).map(item => {
        item.receivablePrice = formatMoney(item.receivablePrice)
        item.settlementPrice = formatMoney(item.settlementPrice)
        item.balance = formatMoney(item.balance)
        return item
      })
      this.onQuery()
      this.handlePrint(printExclusive)
    },
    handlePrint(printExclusive) {
      if (!this.buttonsPermissions.DaYin) {
        this.$elMessage.warning('未拥有打印权限！')
      } else if (!printExclusive || printExclusive.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let label = '全部'
        if (this.queryData.settlementStatus == '2') {
          label = '已结销'
        } else if (this.queryData.settlementStatus == '0') {
          label = '未结销'
        } else if (this.queryData.settlementStatus == '1') {
          label = '部分结销'
        } else if (this.queryData.settlementStatus == '3') {
          label = '已作废'
        }
        let printData = {
          riqi: this.queryData.startDate + '~' + this.queryData.endDate,
          wuliugongsi: this.$refs.wuliugongsi.$refs.xghSelect.selected.label,
          jingshouren: this.$refs.jingshouren.$refs.xghSelect.selected.label,
          wuliudanhao: this.queryData.wldh,
          jiexiaozhuangtai: label,
          printExclusive,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          console.log(510000)
          this.$refs.print.show(printData, this.columnData, this.billName)
        } else {
          console.log(51222)
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum(this.billName, () => {
              this.$refs.print.show(printData, this.columnData, this.billName)
            })
          } else {
            this.$refs.print.show(printData, this.columnData, this.billName)
          }
        }
      }
    },
    checkBill() {
      if (this.activeBill.orderId) {
        this.$toBillDetail(this, this.activeBill.orderType, this.activeBill.orderId)
      } else {
        this.$elMessage.warning('请先选择要查看的单据！')
      }
    },
    // 选中当前行
    onClickRow(row) {
      this.activeBill = row
      this.getExpressSettlementListInfoById(row)
    },
    // 双击列表
    handleRowDbclick(row) {
      this.$toBillDetail(this, row.orderType, row.orderId)
    },
    // 初始化获取数据
    getData() {
      this.getTimeRange(this.$setTimeRange(5)) // 默认获取当月时间
      this.selectTitle()
    },
    // 初始化查询列配置值
    async selectTitle() {
      let obj = await this.$setColumn.selectColumn(this.url.api)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.url.api, this.columnData, 0, this.updateId)
        this.updateId = id
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.url.api, this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
    },
    // 触发列配置弹框
    onShowColumn() {
      this.defaultColumnData = this.$options.data().columnData
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 获取表格信息数据
    async getTableData(page) {
      let ss = this.queryData.settlementStatus
      let params = {
        ...this.queryData,
        settlementStatus: ss == -1 ? undefined : ss,
      }
      const res = await getAction(this.url.listUrl, params)
      if (res.code == 200) {
        this.tableData = res.result
        if (this.tableData.length > 0) {
          let item = this.tableData[0]
          this.getExpressSettlementListInfoById(item)
        } else {
          this.settlementList = []
        }
        this.$nextTick(() => {
          this.$refs['tableRef'].doLayout()
        })
      } else {
        this.$elMessage.error(res.message)
      }
    },
    getExpressSettlementListInfoById(item) {
      getAction(this.url.detailUrl, {
        orderId: item.orderId,
        collectionPayId: item.collectionPayId,
      }).then((res) => {
        if (res.code == 200) {
          this.settlementList = res.result
          this.$nextTick(() => {
            this.$refs['tableRef1'].doLayout()
          })
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 查询
    onQuery() {
      this.getTableData()
    },
    reset() {
      this.queryData = this.$options.data().queryData
      this.getTimeRange(this.$setTimeRange(5))
      this.getTableData()
    },
    // 刷新
    onRefresh() {
      Object.assign(this.$data, this.$options.data())
      this.getData()
    },
    // 判断当前选择时间段
    changeDate(val) {
      switch (val) {
        case '全部':
          this.queryData.startDate = ''
          this.queryData.endDate = ''
          break
        case '今日':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '本周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '本月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '本年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        default:
          break
      }
    },
    // 获取时间范围并设置
    getTimeRange(data) {
      this.nowDate = [data.now, data.end]
      this.queryData.startDate = data.now
      this.queryData.endDate = data.end
    },
    // 获取当前选中时间
    onClickPicker(val) {
      this.queryData.startDate = val[0]
      this.queryData.endDate = val[1]
    },
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.tableData.length + '条明细'
        } else if (['receivablePrice', 'settlementPrice', 'balance'].includes(column.property)) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = this.$formatMoney(sums[index])
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 合计列计算
    getSummaries1(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.settlementList.length + '条明细'
        } else if (['allPrice', 'offPrice', 'thisPrice'].includes(column.property)) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = this.$formatMoney(sums[index])
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
.basic_info {
  width: 100%;
  height: calc(100vh - 102px);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.number {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 24px;
  color: #666666;
}
.info_content_div {
  width: 100%;
  height: calc(100% - 60px);
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;

  .div_screen {
    width: 100%;
    // height: 50px;
    margin-bottom: 10px;
    display: flex;
    // justify-content: space-between;
    align-items: baseline;

    .screen_left {
      font-size: 12px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      min-width: 600px;
    }

    .screen_right {
      margin-right: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      box-sizing: border-box;

      ::v-deep .el-button {
        // width: 60px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border-radius: 5px;
        border: none;
      }

      ::v-deep .el-select {
        width: 80px;
        margin: 0 10px;

        .el-input {
          .el-input__inner {
            height: 30px;
            border-color: #e3e3e3;
            font-size: 12px;
            padding-left: 5px;
          }

          .el-input__suffix {
            height: 30px;
            display: flex;
            align-items: center;
          }
        }
      }

      ::v-deep .el-date-editor {
        width: 220px;
        height: 30px;
        background: #ffffff;
        border: 1px solid #d9d9d9;
        margin-right: 0.112507rem;
        padding: 3px 6px;

        .el-range__icon {
          position: absolute;
          right: 0;
          line-height: 30px;
        }

        .el-range-separator {
          line-height: 24px;
        }

        .el-range-input {
          font-size: 12px;
        }

        .el-range__close-icon {
          display: none;
        }
      }
    }
  }

  .div_table {
    width: 100%;
    // height: 100%;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
    // transition: all 0.3s;

    .table_content {
      height: 100%;
      display: flex;
      flex-direction: column;

      .content_div1 {
        width: 100%;
        height: 60%;
      }

      .content_div {
        width: 100%;
        height: 40%;
      }

      .table_Div1 {
        width: 100%;
        height: calc(100% - 15px);
      }

      .table_title {
        width: 100%;
        height: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        > div {
          display: flex;
          align-items: center;

          div,
          span {
            font-size: 12px;
            font-family: PingFang SC;
            color: #666;
          }

          div {
            margin-right: 0.25rem;

            &:first-child {
              font-size: 15px;
              font-weight: 600;
            }

            &:last-child {
              color: #ff0000;
            }
          }

          span {
            &:last-child {
              font-size: 25px;
              color: #ff6c00;
              font-weight: 600;
            }
          }

          ::v-deep .el-button {
            width: 70px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #666;
          }

          ::v-deep .el-button--primary {
            background-color: #1b94fb;
            color: #fff;
          }

          ::v-deep .is-plain {
            background-color: #fff;
            border-color: #1b94fb;
            color: #1b94fb;
          }

          .set_up {
            font-size: 23px;
            color: rgb(153, 153, 153);
            margin-right: 0.1rem;
            margin-left: 0.187512rem;
          }
        }
      }

      .table_Div {
        width: 100%;
        height: calc(100% - 0.8rem);
      }

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            min-height: 30px;
            display: flex;
            align-items: center;
            font-size: 12px;
            padding: 0;
            // line-height: 30px;
            justify-content: center;
          }

          &:last-child {
            border-right: none;
          }
        }

        // th {
        //   .cell {
        //     background: #ededed;
        //     justify-content: center;
        //   }
        // }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }
  }
}

.custom_item {
  display: flex;
  align-items: center;
  margin: 10px 10px 10px 0;
  width: 180px;
  font-size: 12px;
}
.custom_item2 {
  display: flex;
  align-items: center;
  margin: 10px 10px 10px 0;
  font-size: 12px;
}

.item_title {
  padding: 0 5px;
  width: auto;
  min-width: 60px;
  line-height: 30px;
  color: #666666;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
}

.custom_select_head {
  flex: 1;
  height: 30px;
  position: relative;

  ::v-deep .el-select {
    .el-input {
      .el-input__inner {
        height: 30px;
        border-color: #e3e3e3;
        font-size: 12px;
        padding-left: 5px;
      }

      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }

  ::v-deep .el-input {
    width: 100%;

    .el-input__inner {
      height: 30px;
      border-color: #e3e3e3;
      font-size: 12px;
      padding-left: 5px;
    }

    .el-input__suffix {
      height: 30px;
      display: flex;
      align-items: center;
    }
  }
}

.custom_more {
  position: absolute;
  right: 10px;
  z-index: 10;
  top: 1px;
  background: #fff;
  height: 28px;
  display: flex;
  align-items: center;
  color: #bfbfbf;
}

.custom_add {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    margin-left: 5px;
    color: #666666;
  }

  i {
    color: #666666;
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}
</style>

